<template>
  <view class="container">
    <view class="menu">
      <uni-segmented-control :current="current" :values="values" @clickItem="onClickItem" styleType="button"
        activeColor="#2B9939"></uni-segmented-control>
    </view>
    <view class="layout">
      <view class="box" v-for="(it,idx) in pets" :key="it.id">
        <view class="pic">
          <image :src="it.url" mode="widthFix" @click="onPreview(idx)" lazy-load></image>
        </view>
        <view class="text">{{it.content}}</view>
        <view class="author">——{{it.author}}</view>
      </view>
    </view>
    <view class="loadMore">
      <uni-load-more status="loading"></uni-load-more>
    </view>
    <view class="fixed">
      <view class="item" @click="onRefresh">
        <uni-icons type="refreshempty" size="26" color="#888"></uni-icons>
      </view>
      <view class="item" @click="onTop">
        <uni-icons type="arrow-up" size="26" color="#888"></uni-icons>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import { onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
  const pets = ref([])
  const current = ref(0)
  const classify = [{ key: 'all', value: '全部' }, { key: 'dog', value: '狗' }, { key: 'cat', value: '猫' }]

  const values = computed(() => classify.map(it => it.value))
  //点击菜单
  const onClickItem = e => {
    current.value = e.currentIndex
    pets.value = []
    network()
  }
  // 点击预览
  const onPreview = idx => {
    uni.previewImage({ urls: pets.value.map(it => it.url), current: idx })
  }

  // 点击刷新
  const onRefresh = () => {
    uni.startPullDownRefresh()
  }

  // 返回顶部
  const onTop = () => {
    uni.pageScrollTo({ scrollTop: 0, duration: 100 })
  }

  // 发送网络请求
  const network = () => {
    uni.showNavigationBarLoading()
    uni.request({
      url: 'https://tea.qingnian8.com/tools/petShow',
      data: { size: 5, type: classify[current.value].key },
      header: { 'access-key': 'hx123456' }
    }).then(res => {
      console.log(res)
      if (res.data.errCode === 0) {
        pets.value = [...pets.value, ...res.data.data]
      } else if (res.data.errCode === 400) {
        uni.showToast({ title: res.data.errMsg, icon: 'none' })
      }
    }).catch(err => {
      console.log(err)
      uni.showToast({ title: '请求有误，请重新刷新', icon: 'none' })
    }).finally(() => {
      console.log('finally')
      uni.hideNavigationBarLoading()
      uni.stopPullDownRefresh()
    })
  }

  // 触底加载更多
  onReachBottom(() => {
    network()
  })

  // 下拉刷新
  onPullDownRefresh(() => {
    current.value = 0
    pets.value = []
    network()
  })
  network()
</script>

<style lang="scss" scoped>
  .container {
    .menu {
      padding: 50rpx 50rpx 0;
    }

    .layout {
      padding: 50rpx;

      .box {
        margin-bottom: 60rpx;
        box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.08);
        border-radius: 15rpx;
        overflow: hidden;

        .pic {
          image {
            width: 100%;
          }
        }

        .text {
          padding: 30rpx;
          color: #333;
          font-size: 36rpx;
        }

        .author {
          padding: 0 30rpx 30rpx;
          text-align: right;
          color: #888;
          font-size: 28rpx;
        }
      }
    }

    .loadMore {
      padding-bottom: calc(env(safe-area-inset-bottom) + 50rpx);
    }

    .fixed {
      position: fixed;
      right: 30rpx;
      bottom: 80rpx;
      padding-bottom: env(safe-area-inset-bottom);

      .item {
        width: 90rpx;
        height: 90rpx;
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 50%;
        margin-bottom: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #eee;
      }
    }
  }
</style>